<template>
  <div class="p-4">
    <el-form :model="consultantInfo" label-width="120px">
      <el-form-item label="用户名">
        <el-input v-model="consultantInfo.username" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input v-model="consultantInfo.password" type="password" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="consultantInfo.name" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="consultantInfo.phone" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select v-model="consultantInfo.sex" :disabled="!isEditMode">
          <el-option label="男" value=1></el-option>
          <el-option label="女" value=0></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="头像">
        <el-upload
            action="/api/upload"
            :show-file-list="false"
            :before-upload="beforeAvatarUpload"
            @success="handleAvatarSuccess"
            :disabled="!isEditMode"
        >
          <template #trigger>
            <img :src="getImgUrl(consultantInfo.avatar)" alt="Avatar" style="width: 100px">
          </template>
        </el-upload>
      </el-form-item>
      <el-form-item label="地区">
        <el-input v-model="consultantInfo.region" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-form-item label="个人简介">
        <el-input type="textarea" v-model="consultantInfo.personalIntroduction" :disabled="!isEditMode"></el-input>
      </el-form-item>
      <el-form-item label="等级编号">
        <el-select v-model="consultantInfo.levelId" :disabled="!isEditMode">
          <el-option label="国家一级心理咨询师" value="1"></el-option>
          <el-option label="国家二级心理咨询师" value="2"></el-option>
          <el-option label="国家三级心理咨询师" value="3"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="是否认证">
        <el-select v-model="consultantInfo.isVerified" :disabled="!isEditMode">
          <el-option label="是" value="1"></el-option>
          <el-option label="否" value="0"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="toggleEditMode" v-if="!isEditMode">编辑</el-button>
        <el-button type="primary" @click="saveInfo" v-if="isEditMode">保存</el-button>
        <el-button @click="cancelEdit" v-if="isEditMode">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ref, reactive ,onMounted} from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

// 咨询师个人信息
const consultantInfo = reactive({
  id: '',
  username: '',
  password: '',
  name: '',
  phone: '',
  sex: '',
  avatarUrl: '',
  region: '',
  personalIntroduction: '',
  levelId: '',
  isVerified: ''
});

const isEditMode = ref(false);
const originalInfo = reactive({ ...consultantInfo });
const id =ref(5);
// 加载咨询师信息
onMounted(async () => {
  try {
    const res = await axios.get('/api/consultant/get', {
      params: {
        id: id.value
      }
    });
    console.log(res);

    const sexMap = {
      0: '女',
      1: '男'
    };
    const levelMap = {
      1: '国家一级心理咨询师',
      2: '国家二级心理咨询师',
      3: '国家三级心理咨询师'
    }
    const verifiedMap = {
      0: '否',
      1: '是'
    }
    res.data.data.sex = sexMap[res.data.data.sex];
    res.data.data.levelId = levelMap[res.data.data.levelId];
    res.data.data.isVerified = verifiedMap[res.data.data.isVerified];
    Object.assign(consultantInfo, res.data.data);
    console.log(consultantInfo);
    Object.assign(originalInfo, res.data.data);
  } catch (error) {
    ElMessage.error('加载信息失败');
  }
});
const toggleEditMode = () => {
  isEditMode.value = !isEditMode.value;
};

const saveInfo = async () => {
  try {
    if(consultantInfo.sex === "女"){
      consultantInfo.sex = 0;
    }else if(consultantInfo.sex === "男"){
      consultantInfo.sex = 1;
    }
    if(consultantInfo.levelId === "国家一级心理咨询师"){
      consultantInfo.levelId = 1;
    }else if(consultantInfo.levelId === "国家二级心理咨询师"){
      consultantInfo.levelId = 2;
    }else if(consultantInfo.levelId === "国家三级心理咨询师"){
      consultantInfo.levelId = 3;
    }
    if(consultantInfo.isVerified === "否"){
      consultantInfo.isVerified = 0;
    }
    else if(consultantInfo.isVerified === "是"){
      consultantInfo.isVerified = 1;
    }

    await axios.put('/api/consultant/modify', consultantInfo);
    const sexMap1 = {
      0: '女',
      1: '男'
    };
    const levelMap1 = {
      1: '国家一级心理咨询师',
      2: '国家二级心理咨询师',
      3: '国家三级心理咨询师'
    }
    const verifiedMap1 = {
      0: '否',
      1: '是'
    }
    consultantInfo.sex = sexMap1[consultantInfo.sex];
    consultantInfo.levelId = levelMap1[consultantInfo.levelId];
    consultantInfo.isVerified = verifiedMap1[consultantInfo.isVerified];
    console.log(consultantInfo.sex);
    console.log(consultantInfo.levelId);
    console.log(consultantInfo.isVerified);
    console.log(consultantInfo);
    ElMessage.success('信息保存成功');
    isEditMode.value = false;
    Object.assign(originalInfo, consultantInfo);
  } catch (error) {
    ElMessage.error('保存信息失败');
  }
};

const cancelEdit = () => {

  Object.assign(consultantInfo, originalInfo);
  isEditMode.value = false;
};

const beforeAvatarUpload = (file) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    ElMessage.error('只能上传 JPG/PNG 格式的图片！');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    ElMessage.error('图片大小不能超过 2MB！');
  }
  return isJpgOrPng && isLt2M;
};

const handleAvatarSuccess = (response, file) => {
  if (response) {
    console.log(response)
    consultantInfo.avatar = response;
    ElMessage.success('头像上传成功！');
  } else {
    ElMessage.error('头像上传失败！');
  }
};
const getImgUrl = (imgUrl) => {
  console.log("http://localhost:8080"+imgUrl)
  return "http://localhost:8080"+imgUrl;
}
</script>

<style scoped>
/* 可以添加自定义样式 */
</style>